<template>
	<div class="boa">
		<Head title="美酒咖啡">
			<img src="../../../../../assets/5.png" alt="" />
		</Head>
		<!-- 轮播区域 -->
		<div class="banner">
			<van-swipe
				class="my-swipe"
				:autoplay="3000"
				indicator-color="white"
			>
				<van-swipe-item
					v-for="(item, index) in bannercoffee"
					:key="index"
				>
					<img :src="getImgUrl(item.posterUrl)" alt="" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 版心区域 -->
		<div class="center">
			<div class="top">
				<!-- 文字区域 -->
				<div class="umit">
					<div class="xiao">
						<div class="left">
							{{ num }}.
						</div>
						<div class="zhong">
							{{ this.$route.query.address }}
						</div>
					</div>
					<div class="bottom">
						<div
							class="xi"
							v-for="(item, index) in list"
							:key="index"
							@click="wincoffee(item.text)"
						>
							<div class="yuan">
								{{ index + 1 }}
							</div>
							<div class="zhong">
								{{ item.text }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
  
  <script>
import Head from "@/components/public/HeadPage.vue"
import { Bannercoffee } from "@/api/index"
export default {
	data() {
		return {
			list: [
				{ "text": "项目简介" },
				{ "text": "运营模式" },
				{ "text": "全国连锁点导航图" },
				{ "text": "邀请全国城市合伙人" },

			],
			bannercoffee: '',
			num:sessionStorage.getItem("i")
		}
	},
	methods: {
		wincoffee(i) {
			if (i == "项目简介") {
				this.$router.push({ path: "/restfather/resone", query: { i } })
			} else if (i == "运营模式") {
				this.$router.push({ path: "/restfather/restwo", query: { i } })
			} else if (i == "全国连锁点导航图") {
				this.$router.push({ path: "/restfather/resthree", query: { i } })
			}
			else if (i == "邀请全国城市合伙人") {
				this.$router.push({ path: "/restfather/resfour", query: { i } })
			}

		},
		getImgUrl(img) {
			return this.montageImgUrl(img)
		},
	},
	components: {
		Head
	},
	mounted() {
		Bannercoffee().then((res) => {
			if (res.data.code == 200) {
				this.bannercoffee = res.data.rows
				// console.log(res.data.rows);
			}
		})
	}
}
  </script>
  
  <style scoped>
.boa {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 总区域 */
.top {
	width: 100%;
	background-color: white;
}

/* 图标区域 */
.top h3 img {
	width: 0.24rem;
	margin-right: 0.05rem;
}
.van-swipe-item {
	height: 1.5rem;
}

.van-swipe-item img {
	width: 100%;
	height: 1.5rem;
}
/* 轮播区域 */
.banner {
	width: 100%;
	height: 1.5rem;
}
/* 版心区域 */
.center {
	width: 98%;
}
/* 用人单位区域 */
.umit {
	width: 100%;
	min-height: 0.4rem;
	border-radius: 0.1rem;
	margin-top: 0.1rem;
	background-color: white;
}
.xiao {
	width: 100%;
	margin-top: 0.05rem;
	display: flex;
	background-color: #f0eff5;
}

/* 左边区域 */
.xiao .left {
	width: 5%;
	height: 0.3rem;
	margin-left: 0.1rem;
	font-weight: 700;
	text-align: center;
	line-height: 0.3rem;
}
.xi {
	width: 100%;
	margin-top: 0.05rem;
	display: flex;
}
.xi .yuan {
	width: 0.16rem;
	height: 0.16rem;
	margin-left: 0.1rem;
	font-weight: 700;
	text-align: center;
	line-height: 0.16rem;
	border-radius: 50%;
	margin-top: 0.05rem;
	border: 1px solid black;
}

/* 中间区域 */
.zhong {
	width: 95%;
	height: 100%;
	line-height: 0.3rem;
	padding-left: 5px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/* 底部区域 */
.bottom {
	width: 100%;
	height: 100%;
	margin-top: 0.05rem;
}

.zhon {
	width: 90%;
	height: 100%;
	line-height: 0.3rem;
	padding-left: 0.35rem;
	font-weight: 700;
}
</style>